 var data=[
      {id:1,author:"Pete Hunt",text:"This is one comment"},
      {id:2,author:"Jordan Walke",text:"This is *another* comment"}
    ];

    var Comment =React.createClass({
      rawMarkUp:function(){
          var md=new Remarkable();
          var rawMarkup=md.render(this.props.children.toString()); 
          return {__html:rawMarkup};
        },
      render:function(){
        return (
          <div className="comment">
            <h2 className="commentAuthor">
            {this.props.author}
            </h2>
            <span dangerouslySetInnerHTML={this.rawMarkUp()} />
          </div>
          );
      }
    });     

      var CommentList=React.createClass({
        render:function(){
          var commentNodes=this.props.data.map(function(comment){
            return (
              <Comment author={comment.author} key={comment.id} >
                {comment.text}
              </Comment>
              );
          });
          return (
              <div className="commentList">
                {commentNodes}
              </div>
            );
        }
      });

      var CommentForm=React.createClass({
        getInitialState:function(){
          return {author:"",text:""};
        },
        handleAuthorChange:function(e){
          this.setState({author:e.target.value});
        },
        handleTextCahge:function(e){
          this.setState({text:e.target.value});
        },
        handleSubmit:function(e){
          e.preventDefault();
          var author=this.state.author.trim();
          var text=this.state.text.trim();
          if(!text||!author){
            return;
          }
          // TODO submit to server --added
          this.props.onCommentSubmit({author:author,text:text});
          this.setState({author:"",text:""});
        },
        render:function(){
          return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange} />
              <input type="text" placeholder="Say something" value={this.state.text} onChange={this.handleTextCahge} />
              <input type="submit" value="Post"/>
            </form>
            );
        }
      });

      var CommentBox=React.createClass({

        loadCommentsFromServer:function(){
           $.ajax({
            url:this.props.url,
            dataType:"json",
            cache:false,
            success:function(data){
              this.setState({data:data});
            }.bind(this),
            error:function(xhr,status,err){
              console.error(this.props.url,status,err.toString());
            }.bind(this)
          });
           console.log("又一次");
        },

        handleCommentSubmit:function(comment){

            var comments=this.state.data;
            comment.id=Date.now();
            var newComments=comments.concat([comment]);
            this.setState({data:newComments});

            // TODO submit to the server and refresh the list. --added
            $.ajax({
              url:this.props.url,
              dataType:"json",
              type:"post",
              data:comment,
              success:function(data){
                this.setState({data:data});
              }.bind(this),
              error:function(xhr,status,error){
                console.error(this.props.url,status,error.toString());
              }.bind(this)
            });

        },
        getInitialState:function(){
          return {data:[]};
        },
        //组件被渲染时被React自动调用的方法
        componentDidMount:function(){
         this.loadCommentsFromServer();
         setInterval(this.loadCommentsFromServer,this.props.pollInterval);
          
        },
        render:function(){
          return (
            <div className="commentBox">
              <h1>Comments</h1>
              <CommentList data={this.state.data}/>
              <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
            </div>
          );
        }

      });

      

      ReactDOM.render(
        /*<CommentBox data={data}/>,*/
        <CommentBox url="/api/comments" pollInterval={2000}/>,
        document.getElementById("content")
      );